<template>
  <div class="counselor-portal">
    <h2>辅导员端功能导航</h2>
    <div class="feature-grid">
      <router-link class="feature-card" to="/counselor/custom-send">
        <div class="icon">✉️</div>
        <div class="title">自定义发送</div>
        <div class="desc">向家长/学生发送自定义消息</div>
      </router-link>
      <router-link class="feature-card" to="/counselor/family-chat">
        <div class="icon">💬</div>
        <div class="title">家庭沟通</div>
        <div class="desc">与家长进行一对一沟通</div>
      </router-link>
      <router-link class="feature-card" to="/counselor/holiday-report">
        <div class="icon">📅</div>
        <div class="title">假期报备</div>
        <div class="desc">收集学生假期去向与报备</div>
      </router-link>
      <router-link class="feature-card" to="/counselor/survey-template">
        <div class="icon">📝</div>
        <div class="title">问卷模板管理</div>
        <div class="desc">创建和管理问卷模板</div>
      </router-link>
      <router-link class="feature-card" to="/counselor/survey-view">
        <div class="icon">📊</div>
        <div class="title">问卷查阅</div>
        <div class="desc">查看问卷结果与统计</div>
      </router-link>
    </div>
    <div style="text-align:center;margin-top:32px;">
      <router-link to="/">返回登录</router-link>
    </div>
  </div>
</template>
<script>
export default { name: 'Counselor' }
</script>
<style scoped>
.counselor-portal {
  max-width: 900px;
  margin: 40px auto;
  padding: 32px 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
h2 {
  text-align: center;
  margin-bottom: 36px;
  color: #3a3a3a;
}
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}
.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  padding: 28px 18px 22px 18px;
  background: linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 100%);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(102,126,234,0.08);
  text-decoration: none;
  color: #333;
  transition: box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover {
  box-shadow: 0 8px 24px rgba(102,126,234,0.18);
  transform: translateY(-4px) scale(1.04);
}
.icon {
  font-size: 38px;
  margin-bottom: 16px;
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}
.desc {
  font-size: 14px;
  color: #666;
  text-align: center;
}
</style> 